<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-21 15:32:36
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-29 17:16:10
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-21 15:32:36
-->
<template>
  <a-card title="基本用法">
    <a-image
      width="64"
      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
    />
  </a-card>

  <a-card title="错误状态">
    <a-image
      width="142"
      height="142"
      :src="`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd.webp?timestamp=${timestamp}`"
      alt="This is a picture ofthe human hair is brown."
    />
  </a-card>

  <a-card title="加载状态">
    <div>
      <a-button
        type="primary"
        style="margin-bottom: 20px"
        @click="
          () => {
            timestamp = Date.now();
          }
        "
      >
        reload
      </a-button>
    </div>
    <a-image
      width="124"
      height="124"
      :src="`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp?timestamp=${timestamp}`"
      show-loader
    />
    <a-image
      width="124"
      height="124"
      :src="`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp?timestamp=${timestamp}`"
      style="marginleft: 67px"
    >
      <template #loader>
        <div class="loader-animate" />
      </template>
    </a-image>
  </a-card>

  <a-card title="多图预览">
    <a-image-group infinite>
      <a-space wrap>
        <a-image
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
          width="100"
          height="40"
        />
        <a-image
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
          width="100"
          height="40"
        />
        <a-image
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp"
          width="100"
          height="40"
        />
        <a-image
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp"
          width="100"
          height="40"
        />
      </a-space>
    </a-image-group>
  </a-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
const timestamp = ref();
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}

.loader-animate {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -60deg,
    var(--color-fill-2) 25%,
    var(--color-neutral-3) 40%,
    var(--color-fill-3) 55%
  );
  background-size: 400% 100%;
  animation: loop-circle 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
}

@keyframes loop-circle {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>
